<template>
  <div class="page" :style="{
  backgroundImage: `url('assets/1/1.jpg')`
}">
    <div class="container">
      <div class="back">
        <router-link :to="'/f'" class="back-btn"><a-icon type="left-circle" /></router-link>
      </div>
      <div class="header">
        <header>智慧旅游系统分析结果</header>
      </div>
      <div class="main">
        <a-card class="card" title="天气情况">
          <p v-for="item in list1" :key="item.toString()"><a :href="item.url">{{ item.text }}</a></p>
          <p><a href="f/1.1 (L1400)四姑娘山2015-2019年客流量折线图.html">四姑娘山2015-2019年客流量</a></p>
          <p><a href="f/1. 2四姑娘山2015-2019年客流折线图（含时间轴）.html">四姑娘山2015-2019年客流</a></p>
          <p><a href="f/1.3 (L1400)四姑娘山2017年单日客流量.html">四姑娘山2017年单日客流量</a></p>
          <p><a href="f/1.4 四姑娘山2015-2019年月平均客流条形图（含时间轴）.html">四姑娘山2015-2019年月平均客流</a></p>
          <p><a href="f/1.5 四姑娘山2017年月平均客流条形图.html">四姑娘山2017年月平均客流</a></p>
        </a-card>
        <a-card class="card" title="客次预览">
          <p v-for="item in list2" :key="item.toString()"><a :href="item.url">{{ item.text }}</a></p>
          <p><a href="f/2.1 小金2015-2019年天气数据统计玫瑰图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.2 小金2015-2019年天气数据统计圆环图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.3小金2015-2019年天气词云图.html">小金2015-2019年天气词</a></p>
          <p><a href="f/2.4 小金2017年天气数据统计圆环图.html">小金2017年天气数据统计圆环图</a></p>
          <p><a href="f/2.5小金2017年天气统计南丁格尔玫瑰图.html">小金2017年天气统计南丁格尔玫瑰图</a></p>
        </a-card>
        <a-card class="card" title="气温统计">
          <p v-for="item in list3" :key="item.toString()"><a :href="item.url">{{ item.text }}</a></p>
          <p><a href="f/2.1 小金2015-2019年天气数据统计玫瑰图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.2 小金2015-2019年天气数据统计圆环图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.3小金2015-2019年天气词云图.html">小金2015-2019年天气词</a></p>
          <p><a href="f/2.4 小金2017年天气数据统计圆环图.html">小金2017年天气数据统计圆环图</a></p>
          <p><a href="f/2.5小金2017年天气统计南丁格尔玫瑰图.html">小金2017年天气统计南丁格尔玫瑰图</a></p>
        </a-card>
        <a-card class="card" title="客次详情">
          <p v-for="item in list4" :key="item.toString()"><a :href="item.url">{{ item.text }}</a></p>
          <p><a href="f/2.1 小金2015-2019年天气数据统计玫瑰图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.2 小金2015-2019年天气数据统计圆环图.html">小金2015-2019年天气数据统计</a></p>
          <p><a href="f/2.3小金2015-2019年天气词云图.html">小金2015-2019年天气词</a></p>
          <p><a href="f/2.4 小金2017年天气数据统计圆环图.html">小金2017年天气数据统计圆环图</a></p>
          <p><a href="f/2.5小金2017年天气统计南丁格尔玫瑰图.html">小金2017年天气统计南丁格尔玫瑰图</a></p>
        </a-card>
        <a class="round-btn" :href="preUrl">
          <span>预测</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: {
    list1: Array,
    list2: Array,
    list3: Array,
    list4: Array,
    preUrl: String,
    backUrl: String
  },
  mounted () {
    console.log(this.list1)
  }
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 50px;
  max-width: 1400px;
  background-color: rgba(255, 255, 255, .5);
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 32px;
}

@media screen and (min-width: 720px) {
  .main {
    display: flex;
    flex-flow: row wrap;
    position: relative;
  }

  .main .card {
    margin: 50px;
    flex-grow: 1;
    width: 40%;
  }

  .main .round-btn {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}


.back a{
  background-color: transparent;
  font-size: 48px;
  color: dodgerblue;
  border: none;
}

.back a:hover {
  cursor: pointer;
  outline: none;
  color: red;
}

@media screen and (max-width: 720px) {
  .main {

  }

  .main .round-btn {

  }
}

.card {
  background-color: rgba(255, 255, 255, .8);
}

.card p {
  transition: .4s all linear;
}

.card p a:hover {
  color: rgba(255, 0, 0, .4);
}

.card p a:visited {
  /*color: rgba(255, 0, 0, .8);*/
}

.card p:hover {
  padding-left: 20px;
}

.round-btn {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: rgba(30, 144, 255, .8);
  transform: translate(-50px, -50px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s all linear;
}

.round-btn:hover {
  cursor: pointer;
  background-color: rgba(30, 144, 255, 1);
  font-size: 24px;
}

.round-btn span {
  color: #ffffff;
  word-spacing: 1em;
}
</style>